<script setup>
import { ref } from 'vue'
import {ArrowDown, Avatar, Search, User} from "@element-plus/icons-vue";
import {isPermission} from "../../../utils/utils.js";
import {listCourse, updateState} from "../../../api/course/course.js";
import StudentJoinCourse from "./course/StudentJoinCourse.vue";
import router from "../../../router/index.js";
// 加入课程显示
const isJoinCourse=ref(false);
// 课程
const courses = ref([]) // 根据需要自行调整卡片数量
const total=ref(0)
// 分页插件大小
const searchName=ref(["未开始", "进行中","已结束"])
// 搜索标签
const searchTag=ref(null);
// 显示标签
const displayLabels = (value) => {
  searchTag.value=value;
  condition.value.state=searchName.value.indexOf(value);
  // console.log(condition.value);
}

// 搜索条件
const condition=ref({
  state:'',
  courseName:'',
  pageNum:1,
  pageSize:8,
});

// 获取课程列表
const handleListCourse=async ()=>{
    await listCourse(condition.value).then((res)=>{
      courses.value=res.data.data;
      total.value=res.data.total;
    })
}
// 关闭标签
const handleClose = () => {
  searchTag.value=null;
  condition.value.state='';
}

// 加入课程
const handleJoinCourse=()=>{
  isJoinCourse.value=true;
}
// 跳转到课程详情
const handleGoCourse=(id)=>{
  localStorage.setItem("courseId",id);
  router.push("/course/chapter")
}
//修改状态
const handleUpdateState=async ()=>{
  await updateState().then(()=>{
    handleListCourse();
  });
}
// 到达创建课程
const handleGoInsertCourse=()=>{
  router.push("/insertcourse")
}

// 关闭加入课程弹窗
const handleJoinCourseClose=()=>{
  isJoinCourse.value=false;
}

handleUpdateState()



</script>

<template>
  <div>
    <el-container>
      <el-header style="height: 20px">
        <!--    选择条件-->
        <div>
          <!--下拉框-->
          <el-dropdown>
            <span style="font-size: 16px;">
            状态
              <el-icon>
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu v-model="searchName">
                <el-dropdown-item v-for="(value, index) in searchName" :key="index" @click="displayLabels(value)">{{value}}</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-tag type="info" style="margin-left: 10px;" v-if="searchTag!==null" closable @close="handleClose">{{searchTag}}</el-tag>
          <el-button type="primary" style="float: right" v-if="isPermission(2)" @click="handleGoInsertCourse">创建课程</el-button>
          <el-button type="primary" style="float: right" v-if="isPermission(0)" @click="handleJoinCourse">加入课程</el-button>
          <!--      搜索框-->
          <el-input
              v-model="condition.courseName"
              style="width: 300px;float: right;margin-right: 20px"
              placeholder="请输入课程名称"
          >
            <template #append>
              <el-button :icon="Search" @click="handleListCourse"/>
            </template>
          </el-input>
        </div>
      </el-header>
      <el-main style="height: 70vh;position: relative;max-width: 148vh">
        <!--课程卡片-->
        <el-row :gutter="3">
          <el-col :span="6" v-for="(course,index) in courses" :key="index">
            <!-- 点击课程后跳转 -->
            <el-card shadow="hover"  @click="handleGoCourse(course.id)" style="margin-bottom: 20px;">
              <div style="text-align: center;">
                <!-- 课程标题 -->
                <h3>{{ course.courseName }}</h3>
                <!-- 发布老师头像和发布老师水平居中 -->
                <div class="card-text">
                  <el-avatar :size="50" :icon="User" :src="course.headerLink" />
                  <span>{{ course.username }}</span>
                </div>
              </div>
              <template #footer class="footer">
                <div style="display: flex; align-items: center; justify-content: space-between;">
                  <el-popover
                      placement="top-start"
                      :width="1"
                      trigger="hover"
                      content="成员"
                  >
                    <template #reference>
                      <div style="display: flex; justify-content: flex-start; align-items: center;">
                        <el-icon><Avatar/></el-icon>
                        <!-- 成员数量-->
                        <div>{{course.number}}</div>
                      </div>
                    </template>
                  </el-popover>
                  <el-tag type="primary" style="margin-left: auto;">{{searchName[course.state]}}</el-tag>
                </div>

              </template>
            </el-card>
          </el-col>
        </el-row>

        <!--    分页插件-->
        <div class="pagination">
          <el-pagination
              v-model:current-page="condition.pageNum"
              :page-size="condition.pageSize"
              :small="false"
              :background="true"
              layout="total, prev, pager, next"
              :total="total"
              @change="handleListCourse"
          />
        </div>
      </el-main>
    </el-container>

  </div>
  <StudentJoinCourse v-model="isJoinCourse" @close="handleJoinCourseClose" @list="handleListCourse"> </StudentJoinCourse>
</template>

<style scoped>
/* 可以根据需要自定义样式 */
.card-text{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 8px;
}
.footer{
  display: flex;
  float :left;
}
.pagination {
  position: absolute;
  right: 0; /* 靠右 */
  bottom: 0; /* 靠下 */
  display: flex;
  justify-content: right;
}

</style>
